<template>
  <div class="content">
    <div class="top">
      <div class="tmp">{{ item.tmp }}°</div>
      <div class="box" :style="{ height: calcHeight(item.tmp, find) }" />
    </div>
    <div class="bottom">
      <img class="img" :src="imgUrl(item.code)" />
      <div class="time">{{ item.time }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  hour: {
    type: Object,
  },
  item: {
    type: Object,
  },
});

// 图片链接地址
const imgUrl = (code) => {
  return `https://a.hecdn.net/img/common/icon/202106d/${code}.png`;
};

const hourMaxMin = (hour) => {
  const arr = [];
  for (let i = 0; i < hour.length; i++) {
    arr.push(hour[i].tmp);
  }
  const maxT = Math.max(...arr);
  const minT = Math.min(...arr);
  return { maxT, minT };
};

const find = computed(() => {
  return hourMaxMin(props.hour);
});

const calcHeight = (
  tmp,
  customize = {
    maxT: 0,
    minT: -20,
  },
  h = 50
) => {
  const { maxT, minT } = customize;
  // 最大最小相同时，直接返回高度
  if (maxT === minT) return "50px";

  const proportion = (tmp - minT) / (maxT - minT);

  const divH = `${proportion * h + 15}px`;
  return divH;
};
</script>

<style lang="less" scoped>
.content {
  .top {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100px;
    .tmp {
      flex: 1;
      display: flex;
      flex-direction: column-reverse;
      padding-left: 4px;
      margin-bottom: 4px;
    }
    .box {
      margin: auto;
      width: 8px;
      border-radius: 4px;
      background-color: #427bff;
    }
  }
  .bottom {
    .img {
      display: block;
      margin: 0 auto;
      padding: 4px 0;
      width: 28px;
      height: auto;
    }
    .time {
      text-align: center;
    }
  }
}
</style>